<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我的抵押</title>
    <!-- <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous"> -->
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/finance.css">
    <!-- <link rel="stylesheet" href="./css/pledgebit.css"> -->
    <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
</head>

<body>
    <!-- 导航与背景 -->
    <div class="container-fulid firstHead">
        <nav class="navbar navbar-inverse">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                        aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">
                        <img src="images/logo.png" alt="">
                        <span>果粒多数字商品抵押</span>
                    </a>
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="./index.html">首页</a>
                        </li>
                        <li>
                            <a href="./finance.html">我要赎回</a>
                        </li>
                        <li>
                            <a class="active" href="./finance.html">财务中心</a>
                        </li>
                        <li>
                            <a href="./person.html">个人中心</a>
                        </li>
                        <li>
                            <a href="./login.html" class="entry">登录</a>
                        </li>
                        <li>
                            <a href="./register.html" class="register">注册</a>
                        </li>
                        <li>
                            <a href="#" class="notice">公告</a>
                        </li>
                        <li>
                            <a href="./help.html" class="help">帮助</a>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>
    </div>
    <!-- 我的抵押详情 -->
    <div class="container-fulid graybg">
        <div class="container">
            <ul class="nav nav-tabs" id="my-tab" role="tablist">
                <li role="presentation" class="active">
                    <a href="#finance" aria-controls="finance" role="tab" data-toggle="tab">我的抵押</a>
                </li>
                <li role="presentation">
                    <a href="#wallet" aria-controls="wallet" role="tab" data-toggle="tab">我的钱包</a>
                </li>
                <li class="pull-right">
                    <span class="middle">如有疑问请联系工作人员QQ:88888888</span>
                </li>
            </ul>
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="finance">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th class="text-center">抵押商品</th>
                                    <th class="text-center">抵押时间</th>
                                    <th class="text-center">抵押周期</th>
                                    <th class="text-center">抵押利率</th>
                                    <th class="text-center">抵押金额</th>
                                    <th class="text-center">抵押利息</th>
                                    <th class="text-center">赎回总金额</th>
                                    <th class="text-center">赎回时间</th>
                                    <th class="text-center">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <img class="img-responsive center-block fasten" src="./images/sybitebi.png" alt="">
                                    </td>
                                    <td>
                                        2017-09-26
                                    </td>
                                    <td>
                                        30天
                                    </td>
                                    <td>
                                        0.4%
                                    </td>
                                    <td>
                                        ￥60000
                                    </td>
                                    <td>
                                        ￥666
                                    </td>
                                    <td class="red-display">
                                        ￥60666
                                    </td>
                                    <td>
                                        2017-10-26
                                    </td>
                                    <td>
                                        <a href="#">操作</a>
                                        <a href="#">续期</a>
                                        <a href="#">查看详情</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <img class="img-responsive center-block fasten" src="./images/sydataosha.png" alt="">
                                    </td>
                                    <td>
                                        2017-07-26
                                    </td>
                                    <td>
                                        60天
                                    </td>
                                    <td>
                                        0.4%
                                    </td>
                                    <td>
                                        ￥6000
                                    </td>
                                    <td>
                                        ￥200
                                    </td>
                                    <td class="red-display">
                                        ￥6200
                                    </td>
                                    <td>
                                        2017-9-26
                                    </td>
                                    <td>
                                        <a href="#" class="red-display">已超时</a>
                                        <a href="#">操作</a>
                                        <a href="#">续期</a>
                                        <a href="#">查看详情</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <img class="img-responsive center-block fasten" src="./images/sydota.png" alt="">
                                    </td>
                                    <td>
                                        2017-05-22
                                    </td>
                                    <td>
                                        30天
                                    </td>
                                    <td>
                                        0.4%
                                    </td>
                                    <td>
                                        ￥8000
                                    </td>
                                    <td>
                                        ￥300
                                    </td>
                                    <td class="red-display">
                                        ￥8300
                                    </td>
                                    <td>
                                        2017-6-22
                                    </td>
                                    <td>
                                        <span class="gray">已赎回</a>
                                            <a href="#">查看详情</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <img class="img-responsive center-block fasten" src="./images/sycsgo.png" alt="">
                                    </td>
                                    <td>
                                        2017-01-12
                                    </td>
                                    <td>
                                        30天
                                    </td>
                                    <td>
                                        0.4%
                                    </td>
                                    <td>
                                        ￥2000
                                    </td>
                                    <td>
                                        ￥200
                                    </td>
                                    <td class="red-display">
                                        ￥2200
                                    </td>
                                    <td>
                                        2017-2-12
                                    </td>
                                    <td>
                                        <img src="./images/syjingqingqidai.png" class="fasten img-responsive center-block" alt="">
                                        <a href="#">查看详情</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <img class="img-responsive center-block fasten" src="./images/syyitaifang.png" alt="">
                                    </td>
                                    <td>
                                        2017-09-26
                                    </td>
                                    <td>
                                        30天
                                    </td>
                                    <td>
                                        0.4%
                                    </td>
                                    <td>
                                        ￥60000
                                    </td>
                                    <td>
                                        ￥666
                                    </td>
                                    <td class="red-display">
                                        ￥60666
                                    </td>
                                    <td>
                                        2017-10-26
                                    </td>
                                    <td>
                                        <span class="gray">已赎回</span>
                                        <a href="#">查看详情</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <img class="img-responsive center-block fasten" src="./images/sylaitebi.png" alt="">
                                    </td>
                                    <td>
                                        2017-09-26
                                    </td>
                                    <td>
                                        30天
                                    </td>
                                    <td>
                                        0.4%
                                    </td>
                                    <td>
                                        ￥60000
                                    </td>
                                    <td>
                                        ￥666
                                    </td>
                                    <td class="red-display">
                                        ￥60666
                                    </td>
                                    <td>
                                        2017-10-26
                                    </td>
                                    <td>
                                        <span class="gray">已赎回</span>
                                        <a href="#">查看详情</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane occupy" id="wallet">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>账户概览
                                        <span class="gray">(账户余额=可用金额+冻结金额)</span>
                                    </th>
                                    <th></th>
                                    <th></th>
                                    <th>
                                        <a class="text-right" id="showDetail" href="#">收支明细</a>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        账户余额(元)：￥6666.00
                                    </td>
                                    <td>
                                        可用金额(元)：
                                        <span class="red-display">￥6666.00</span>
                                    </td>
                                    <td>
                                        冻结金额(元)：￥0.00
                                    </td>
                                    <td>
                                        <button onclick="javascript:window.location.href='./recharge&cash1.html'" class="btn btn-success">我要充值</button>
                                        <button onclick="javascript:window.location.href='./recharge&cash1.html'" class="btn btn-danger">我要提现</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        比特币余额(BTC)：0.2
                                    </td>
                                    <td>
                                        可用比特币(BTC)：
                                        <span class="red-display">0.2</span>
                                    </td>
                                    <td>
                                        冻结比特币(BTC)：0
                                    </td>
                                    <td>
                                        <button onclick="javascript:window.location.href='./recharge&cash.html'" class="btn btn-success">我要充值</button>
                                        <button onclick="javascript:window.location.href='./recharge&cash.html'" class="btn btn-danger">我要提现</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        比特币现金余额(BCC)：0
                                    </td>
                                    <td>
                                        可用比特币现金(BCB)：
                                        <span class="red-display">0</span>
                                    </td>
                                    <td>
                                        冻结比特币(BCC)：0
                                    </td>
                                    <td>
                                        <button onclick="javascript:window.location.href='./recharge&cash.html'" class="btn btn-success">我要充值</button>
                                        <button onclick="javascript:window.location.href='./recharge&cash.html'" class="btn btn-danger">我要提现</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        莱特币余额(LTC)：0
                                    </td>
                                    <td>
                                        可用莱特币(LTC)：
                                        <span class="red-display">0</span>
                                    </td>
                                    <td>
                                        冻结莱特币(LTC)：0
                                    </td>
                                    <td>
                                        <button onclick="javascript:window.location.href='./recharge&cash.html'" class="btn btn-success">我要充值</button>
                                        <button onclick="javascript:window.location.href='./recharge&cash.html'" class="btn btn-danger">我要提现</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        以太坊余额(ETH)：0
                                    </td>
                                    <td>
                                        可用以太坊(ETH)：
                                        <span class="red-display">0</span>
                                    </td>
                                    <td>
                                        冻结以太坊(ETH)：0
                                    </td>
                                    <td>
                                        <button onclick="javascript:window.location.href='./recharge&cash.html'" class="btn btn-success">我要充值</button>
                                        <button onclick="javascript:window.location.href='./recharge&cash.html'" class="btn btn-danger">我要提现</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        以太经典余额(ETC)：0
                                    </td>
                                    <td>
                                        可用以太经典(ETC)：
                                        <span class="red-display">0</span>
                                    </td>
                                    <td>
                                        冻结以太经典(ETC)：0
                                    </td>
                                    <td>
                                        <button onclick="javascript:window.location.href='./recharge&cash.html'" class="btn btn-success">我要充值</button>
                                        <button onclick="javascript:window.location.href='./recharge&cash.html'" class="btn btn-danger">我要提现</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- 隐藏的panel -->
                <div role="tabpanel" class="tab-pane occupy" id="detail">
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="return">
                            <a href="#">
                                <i class="glyphicon glyphicon-chevron-left"></i>
                            </a>
                        </li>
                        <li role="presentation" class="active">
                            <a href="#all" aria-controls='all' role="tab" data-toggle="tab">全部收支明细</a>
                        </li>
                        <li role="presentation">
                            <a href="#reCharge" aria-controls='reCharge' role="tab" data-toggle="tab">只看充值</a>
                        </li>
                        <li role="presentation">
                            <a href="#cash" aria-controls='cash' role="tab" data-toggle="tab">只看提现</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" role="tabpanel" id="all">
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <tbody>
                                        <tr>
                                            <td class="text-left">
                                                2017-10-09
                                            </td>
                                            <td>
                                                账户提现(元)
                                            </td>
                                            <td class="red-display">
                                                -666
                                            </td>
                                            <td>
                                                处理中
                                            </td>
                                            <td class="text-warning">
                                                删除
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                2017-10-09
                                            </td>
                                            <td>
                                                账户充值(元)
                                            </td>
                                            <td class="red-display">
                                                +555
                                            </td>
                                            <td>
                                                交易成功
                                            </td>
                                            <td class="text-warning">
                                                删除
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                2017-10-09
                                            </td>
                                            <td>
                                                比特币充值(BTC)
                                            </td>
                                            <td class="red-display">
                                                +0.66
                                            </td>
                                            <td>
                                                交易成功
                                            </td>
                                            <td class="text-warning">
                                                删除
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                2017-10-09
                                            </td>
                                            <td>
                                                比特币提现(BTC)
                                            </td>
                                            <td class="red-display">
                                                +0.66
                                            </td>
                                            <td>
                                                交易成功
                                            </td>
                                            <td class="text-warning">
                                                删除
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                2017-10-09
                                            </td>
                                            <td>
                                                莱特币充值(LTC)
                                            </td>
                                            <td class="red-display">
                                                +.03
                                            </td>
                                            <td>
                                                交易成功
                                            </td>
                                            <td class="text-warning">
                                                删除
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                2017-10-09
                                            </td>
                                            <td>
                                                莱特币提现(LTC)
                                            </td>
                                            <td class="red-display">
                                                -0.2
                                            </td>
                                            <td>
                                                交易成功
                                            </td>
                                            <td class="text-warning">
                                                删除
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                2017-10-09
                                            </td>
                                            <td>
                                                账户充值(元)
                                            </td>
                                            <td class="red-display">
                                                +6666
                                            </td>
                                            <td>
                                                交易成功
                                            </td>
                                            <td class="text-warning">
                                                删除
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                2017-10-09
                                            </td>
                                            <td>
                                                账户提现(元)
                                            </td>
                                            <td class="red-display">
                                                -55
                                            </td>
                                            <td>
                                                交易成功
                                            </td>
                                            <td class="text-warning">
                                                删除
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="tab-pane" role="tabpanel" id="reCharge">
                            这是充值的内容
                        </div>
                        <div class="tab-pane" role="tabpanel" id="cash">
                            这是提现的内容
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- footer -->
    <div class="base container-fulid">
        <div class="container">
            <p class="qq pull-left">QQ群:
                <span>66666666</span>
            </p>
            <p class="email pull-left hidden-xs">邮箱:
                <span>guolicheng@163.com</span>
            </p>
            <p class="copyright pull-right hidden-xs hidden-sm">虚拟物品抵押平台 copyright @ 2017 - 2020 xuniwupindiya.All Rights Reserved版权所有</p>
        </div>
    </div>
    <script>
        $('#my-tab a').click(function (e) {
            e.preventDefault();
            $(this).tab('show');
        })
        $('a[href="#finance"]').click(function () {
            $('#detail').hide();
        })
        $('a[href="#wallet"]').click(function () {
            if ($('#wallet').css('display') == 'none') {
                $('#detail').show();
            }
        })
        $('#showDetail').click(function () {
            $('#detail').show();
            $('#wallet').css('display', 'none');
        })
        $('.return').click(function () {
            $('#wallet').show();
            $('#detail').hide()
        })
        $(function () {
            let allHeight = $(window).height();
            let topHeight = $('.firstHead').height();
            let footHeight = $('.base').height();
            let bgHeight = parseInt(allHeight - topHeight - footHeight);
            $('#my-tab li').click(function () {
                if ($(this).index() == '1') {
                    $('.graybg').height(bgHeight);
                } else {
                    $('.graybg').height('auto');
                }
            })
        })
    </script>
</body>

</html>